﻿<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8" />
	<title>Marking the Main Area of a Webpage</title>
</head>
<body>
<header role="banner">
	<nav role="navigation">
		<ul>
			<li><a href="#gaudi">Barcelona's Architect</a></li>
			<li lang="es"><a href="#sagrada-familia">La Sagrada Família</a></li>
			<li><a href="#park-guell">Park Guell</a></li>
		</ul>
	</nav>
</header>

<!-- ==== START MAIN ==== -->
<main role="main">
	<article>
		<h1 id="gaudi">Barcelona's Architect</h1>

		<p>Antoni Gaudí's incredible buildings bring millions ...</p>

		... [rest of main page content] ...
	</article>
</main>
<!-- end main -->

<aside role="complementary">
	<h1>Architectural Wonders of Barcelona</h1>

	... [rest of aside] ...
</aside>

<footer role="contentinfo">
	... [copyright] ...
</footer>
</body>
</html>